<template>
  <div class="inviteFriends hideScrollBar" ref="scrollEl">
    <!-- 导航 -->
    <NavBar
      :title="$t('inviteFriends.hysnmfcj')"
      isTransparent
      :navScorllOffset="60"
      navScorllColor="#FFF"
      :scrollEl="scrollEl"
      isCusRightBtns
      isFixed
      :isShowLeft="false"
      :isShowNav="false"
    />
    <!-- 背景渐变色 -->
    <div class="inviteFriends-bg"></div>
    <!-- 头部 -->
    <div class="header">
      <!-- 背景封面图片 -->
      <img
        v-if="globalStore.$state.language == 'indonesia'"
        class="header-bgimg"
        src="/image/inviteFriends/sahre-haderbg-icon1.png"
      />
      <img
        v-else-if="globalStore.$state.language == 'mys'"
        class="header-bgimg"
        src="/image/inviteFriends/sahre-haderbg-icon2.png"
      />
      <img
        v-else-if="globalStore.$state.language == 'pt'"
        class="header-bgimg"
        src="/image/inviteFriends/sahre-haderbg-icon3.png"
      />
      <img
        v-else-if="globalStore.$state.language == 'VI'"
        class="header-bgimg"
        src="/image/inviteFriends/sahre-haderbg-icon4.png"
      />
      <img
        v-else
        class="header-bgimg"
        src="/image/inviteFriends/sahre-haderbg-icon0.png"
      />
      <!-- 大嬴家最大的三个奖金 -->
      <div v-if="topSessioinList.length > 0" class="header-winners">
        <img
          class="header-winners-bg"
          src="/image/inviteFriends/sahre-winner-bg.svg"
        />
        <!-- 标题 -->
        <div class="header-winners-title items-center">
          <img
            class="header-winners-title-icon"
            src="/image/title-blue-icon.svg"
          />
          <div class="header-winners-title-text">
            {{ $t("inviteFriends.dyjm") }}
          </div>
          <img
            class="header-winners-title-icon"
            src="/image/title-blue-icon.svg"
          />
        </div>
        <!-- 列表 -->
        <div class="header-winners-list items-center">
          <div
            v-for="item in topSessioinList"
            :key="item.sessionId"
            class="header-winners-list-item items-center"
          >
            <!-- 头像 -->
            <div class="header-winners-list-item-tx items-center">
              <img
                class="header-winners-list-item-tx-bg"
                src="/image/inviteFriends/sahre-winner-txbg.png"
              />
              <ImgNuxt
                class="header-winners-list-item-tx-avatar"
                :src="item.avatar || file.avatarDefault"
                :placeholder="file.avatarDefault"
                isHttp
              ></ImgNuxt>
            </div>
            <div class="header-winners-list-item-nickname">
              {{ item.nickname ? item.nickname.substring(0, 11) : "--" }}
              {{ item.nickname && item.nickname.length > 11 ? "..." : "" }}
            </div>
            <div class="header-winners-list-item-value">
              ${{ toThousands(decimalToLength(item.sessionPrizeAmount)) }}
            </div>
          </div>
        </div>
        <!-- 金币 -->
        <img
          class="header-winners-left"
          src="/image/inviteFriends/sahre-winner-left.png"
        />
        <img
          class="header-winners-right"
          src="/image/inviteFriends/sahre-winner-right.png"
        />
      </div>
      <!-- 底部边框图片 -->
      <img
        class="header-bottomimg"
        src="/image/inviteFriends/header-bottom-icon.svg"
      />
    </div>
    <div class="inviteFriends-contentbg">
      <!-- 会员信息 -->
      <div class="header-user items-center" v-if="shareInfo">
        <div class="header-user-left items-center">
          <!-- 头像 -->
          <ImgNuxt
            class="header-user-img"
            :src="shareInfo.avatar || file.avatarDefault"
            :placeholder="file.avatarDefault"
            isHttp
          ></ImgNuxt>

          <!-- 会员等级 -->
          <div>
            <div class="items-center">
              <!-- 会员等级 -->
              <img
                v-if="shareInfo.vipLevel == 0"
                class="header-user-level"
                src="/image/inviteFriends/level0.svg"
              />
              <img
                v-else-if="shareInfo.vipLevel == 1"
                class="header-user-level"
                src="/image/inviteFriends/level1.svg"
              />
              <img
                v-else-if="shareInfo.vipLevel == 2"
                class="header-user-level"
                src="/image/inviteFriends/level2.svg"
              />
              <img
                v-else-if="shareInfo.vipLevel == 3"
                class="header-user-level"
                src="/image/inviteFriends/level3.svg"
              />
              <img
                v-else-if="shareInfo.vipLevel == 4"
                class="header-user-level"
                src="/image/inviteFriends/level4.svg"
              />
              <img
                v-else-if="shareInfo.vipLevel >= 5"
                class="header-user-level"
                src="/image/inviteFriends/level5.svg"
              />
              <div class="header-user-name">
                {{ shareInfo.nickname.substring(0, 11) }}
                <span style="margin-left: -4px">{{
                  shareInfo.nickname.length > 11 ? "..." : ""
                }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 奖励的 BDC -->
        <div class="header-user-reward items-center">
          <div class="header-user-reward-top">
            {{ $t("inviteFriends.snText") }}
          </div>
          <div class="header-user-reward-line"></div>
          <div class="header-user-reward-bottom">
            {{ shareInfo.friendPrizeAmount }} BDC
          </div>
        </div>
      </div>

      <!-- 谷歌/facebook 授权注册 -->
      <div class="register">
        <div class="register-bg"></div>
        <!-- 标题 -->
        <div class="register-title items-center">
          <img
            class="register-title-leftimg"
            src="/image/assetDetails/desc-logo.svg"
          />
          <div class="register-title-text">
            {{ $t("inviteFriends.regist") }}
          </div>
          <img
            class="register-title-rightimg"
            src="/image/assetDetails/desc-logo.svg"
          />
        </div>
        <!-- 授权 -->
        <div class="register-third items-center">
          <!-- 谷歌注册 -->
          <GoogleSign
            class="register-third-item items-center"
            style="background: #4dc995"
            @success="OnGoogleAuthSuccess"
          >
            <img
              class="register-third-item-logo"
              src="/image/google-icon.svg"
            />
            <div class="register-third-item-text">Google</div>
          </GoogleSign>
          <FacebookSign
            class="register-third-item items-center"
            style="background: #5697dc; margin-right: 0"
            @success="OnFacebookAuthSuccess"
            @error="OnFacebookAuthSuccess(false)"
          >
            <img
              class="register-third-item-logo"
              src="/image/facebook-icon.svg"
            />
            <div class="register-third-item-text">FaceBook</div>
          </FacebookSign>
        </div>
        <!-- or -->
        <div class="register-or items-center">
          <div class="register-or-left"></div>
          <div class="register-or-center">{{ $t("inviteFriends.hzText") }}</div>
          <div class="register-or-right"></div>
        </div>
        <!-- 邮箱 -->
        <van-field
          class="register-input"
          v-model="email"
          type="text"
          center
          clearable
          label=""
          :placeholder="$t('inviteFriends.qsrndyx')"
        >
        </van-field>
        <!-- 验证码 -->
        <div class="password">
          <van-field
            class="register-input register-yzm"
            v-model="password"
            type="digit"
            center
            clearable
            label=""
            :placeholder="$t('inviteFriends.qsryzm')"
            @blur="passwordBlur"
          >
            <template #button>
              <div class="register-send" @click="handleSend" v-if="time <= 0">
                {{ $t("inviteFriends.send") }}
              </div>
              <div class="register-send-nums" v-else>{{ time }}s</div>
            </template>
          </van-field>
          <!-- 动态加载的组件 -->
          <Hcaptcha
            v-if="isLoadHcap"
            ref="hcaptchaRef"
            @verify="handleVerify"
          ></Hcaptcha>
        </div>
        <!-- 验证码错误提示 -->
        <div v-if="errorAlertType == 2" class="errorAlert items-center">
          <img class="errorAlert-icon" src="/image/gth2.svg" />
          <div v-if="true" class="errorAlert-text">
            {{ $t("inviteFriends.yzmcw") }}
          </div>
          <div v-else class="errorAlert-yzmsx">
            {{ $t("inviteFriends.yzmsx") }}
          </div>
        </div>
        <!-- 注册 -->
        <div class="register-btn" @click="registerClick">
          {{ $t("inviteFriends.regist") }}
        </div>
      </div>
      <!-- 往期抽奖 -->
      <div class="wqcj">
        <div class="wqcj-bg"></div>
        <!-- 标题 -->
        <div class="wqcj-title items-center">
          <img
            class="wqcj-title-leftimg"
            src="/image/assetDetails/desc-logo.svg"
          />
          <div class="wqcj-title-text">{{ $t("inviteFriends.wqcj") }}</div>
          <img
            class="wqcj-title-rightimg"
            src="/image/assetDetails/desc-logo.svg"
          />
        </div>
        <template v-if="shareInfo && shareInfo.recentSessioinList.length > 0">
          <!-- 每一期的结果 -->
          <div
            class="wqcj-item items-center"
            v-for="item in shareInfo.recentSessioinList"
            :key="item.sessionId"
          >
            <div class="wqcj-item-left">
              <!-- 园点 -->
              <div class="wqcj-item-left-point"></div>
              <!-- 虚线 -->
              <div class="wqcj-item-left-xx"></div>
            </div>
            <div class="wqcj-item-right">
              <div class="wqcj-item-top items-center">
                <div class="wqcj-item-top-text">
                  {{
                    formatWithTimeZone(
                      item.sessionTime,
                      "Asia/Jakarta",
                      "en-US"
                    )
                  }}
                </div>

                <template v-if="item.sessionId == item.periodId">
                  <img
                    v-if="globalStore.$state.language == 'VI'"
                    class="wqcj-item-top-icon"
                    src="/image/lotterymoney/super-icon1.svg"
                  />
                  <img
                    v-else-if="globalStore.$state.language == 'pt'"
                    class="wqcj-item-top-icon"
                    src="/image/lotterymoney/super-icon.svg"
                  />
                  <img
                    v-else
                    class="wqcj-item-top-icon"
                    src="/image/lotterymoney/super-icon2.svg"
                  />
                </template>
              </div>
              <!-- 信息 -->
              <div class="wqcj-item-bottom">
                <div class="wqcj-item-bottom-header items-center">
                  <div class="wqcj-item-bottom-header-left"></div>
                  <div class="wqcj-item-bottom-header-center items-center">
                    <div class="wqcj-item-bottom-header-center-text">
                      {{ $t("inviteFriends.jcje") }}
                    </div>
                    <div class="wqcj-item-bottom-header-center-value">
                      ${{
                        toThousands(decimalToLength(item.lotteryPoolAmount))
                      }}
                    </div>
                  </div>
                  <div class="wqcj-item-bottom-header-right"></div>
                </div>
                <div class="wqcj-item-bottom-footer items-center">
                  <!-- 大赢家 -->
                  <div class="wqcj-item-bottom-item items-center">
                    <div class="wqcj-item-bottom-item-title">
                      {{ $t("inviteFriends.dyj") }}
                    </div>
                    <!-- 头像 -->
                    <ImgNuxt
                      class="wqcj-item-bottom-item-img"
                      :src="item.avatar || file.avatarDefault"
                      :placeholder="file.avatarDefault"
                      isHttp
                    ></ImgNuxt>
                    <div
                      class="wqcj-item-bottom-item-name"
                      v-if="item.nickname"
                    >
                      {{ item.nickname.substring(0, 11) }}
                      <span style="margin-left: -4px">{{
                        item.nickname.length > 11 ? "..." : ""
                      }}</span>
                    </div>
                    <div v-else class="wqcj-item-bottom-item-name">--</div>
                    <!-- 美元 -->
                    <div class="wqcj-item-bottom-item-monery">
                      <div class="wqcj-item-bottom-item-monery-left"></div>
                      <div class="wqcj-item-bottom-item-monery-text">
                        $
                        {{
                          toThousands(decimalToLength(item.sessionPrizeAmount))
                        }}
                      </div>
                      <div class="wqcj-item-bottom-item-monery-right"></div>
                    </div>
                  </div>
                  <!-- 队伍 -->
                  <div class="wqcj-item-bottom-item items-center">
                    <div class="wqcj-item-bottom-item-title">
                      {{ $t("inviteFriends.dwfh") }}
                    </div>
                    <!-- 头像 -->
                    <img
                      v-if="item.teamConfigId == 1"
                      class="wqcj-item-bottom-item-img"
                      src="/image/lotterymoney/team-red-icon.png"
                    />
                    <img
                      v-else-if="item.teamConfigId == 2"
                      class="wqcj-item-bottom-item-img"
                      src="/image/lotterymoney/team-yellow-icon.png"
                    />
                    <img
                      v-else-if="item.teamConfigId == 3"
                      class="wqcj-item-bottom-item-img"
                      src="/image/lotterymoney/team-blue-icon.png"
                    />
                    <img
                      v-else
                      class="wqcj-item-bottom-item-img"
                      src="/image/lotterymoney/team-default0-icon.png"
                    />
                    <div
                      v-if="item.teamName"
                      class="wqcj-item-bottom-item-name"
                    >
                      {{ item.teamName }}
                    </div>
                    <div v-else class="wqcj-item-bottom-item-name">--</div>
                    <!-- 美元 -->
                    <div class="wqcj-item-bottom-item-monery">
                      <div class="wqcj-item-bottom-item-monery-left"></div>
                      <div class="wqcj-item-bottom-item-monery-text">
                        $
                        {{ toThousands(decimalToLength(item.teamPrizeAmount)) }}
                      </div>
                      <div class="wqcj-item-bottom-item-monery-right"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <div v-else class="wqcj-notData items-center">
          <img class="wqcj-notData-img" src="/image/notdate-icon.png" />
          <div class="wqcj-notData-desc">{{ t("mvp.other.zwnr") }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="inviteFriends">
import {
  toThousands,
  decimalToLength,
  navigateI18nTo,
  getOssFileUrl,
} from "@/utils";
import GoogleSign from "~~/components/google-sign/index.vue";
import FacebookSign from "~~/components/facebook-sign/index.vue";
import Hcaptcha from "~~/components/Hcaptcha/index.vue";
import {
  openID,
  containsEmail,
  hcaptchaValidateGetEmailCode,
  preValidation,
} from "@/api/user";
import { getShareInfo } from "@/api/inviteFriends";
import { useGlobalStore } from "~~/store/global";
import * as jwt from "jose";
import { useTripartiteStore } from "~~/store/modules/useTripartiteStore";

const { t } = useI18n();
const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
  logo: "/image/inviteFriends/invite-friends-share-logo1.png",
  sharePage: "invite-friends/share",
});

/**
 * @description: 网站配置,用于分享页面场景
 */
useSeoMeta({
  title: t("inviteFriends.shareTitle"),
  description: t("inviteFriends.shareTitleDesc"),
  ogTitle: t("inviteFriends.shareTitle"),
  ogDescription: t("inviteFriends.shareTitleDesc"),
  ogImage: file.logo,
  ogUrl: file.sharePage,
  twitterTitle: t("inviteFriends.shareTitle"),
  twitterDescription: t("inviteFriends.shareTitleDesc"),
  twitterImage: file.logo,
  twitterCard: "summary",
});
// Google提供的reCAPTCHA服务的JavaScript API脚本。reCAPTCHA是一种用于区分人类用户和自动化程序（如机器人）的技术，常用于防止垃圾邮件和滥用行为。
useHead({
  script: [
    {
      src: "https://www.google.com/recaptcha/api.js",
    },
  ],
});

const globalStore = useGlobalStore();
const scrollEl = ref();
const route = useRoute();

console.log("页面参数:", route.query);
// firebase埋点
const firebase = useInitFirebase();
// 三方信息
const tripartiteState = useTripartiteStore();

// 获取页面信息
const shareInfo = ref(null);
const topSessioinList = ref([]); // top3奖金列表
const getShareInfoRequest = () => {
  if (route.query && route.query.code) {
    getShareInfo({ inviteCode: route.query.code }).then((res) => {
      // console.log("分享页面信息:", res);
      if (res) {
        topSessioinList.value = res.topSessioinList || [];
        if (res.vipLevel != null && Number(res.vipLevel) >= 0) {
          shareInfo.value = res;
          shareInfo.value.recentSessioinList =
            shareInfo.value.recentSessioinList.map((element) => {
              if (element.teamConfigId == 1) {
                element.teamName = t("lotteryMoney.redTeam");
              } else if (element.teamConfigId == 2) {
                element.teamName = t("lotteryMoney.yellowTeam");
              } else if (element.teamConfigId == 3) {
                element.teamName = t("lotteryMoney.blueTeam");
              }
              return element;
            });
        }
      }
    });
  }
};

// 加载人机组件
const isLoadHcap = ref(false);
onMounted(() => {
  // 1.埋点
  firebase?.logEvent("BDC_H5_invite_friends_PUV");
  // 2. 获取页面信息
  getShareInfoRequest();
  // 3. 检测窗口大小变化
  if (process.client) {
    window.addEventListener("resize", () => {
      const windowHeight = window.innerHeight;
      // const docElementHeight = document.documentElement.clientHeight;
      // const topHeight = windowHeight - docElementHeight;

      let vh = windowHeight * 0.01;
      document.documentElement.style.setProperty("--vh", `${vh}px`);
      // console.log(topHeight, "--vh--", vh);
    });
  }
  isLoadHcap.value = true;
});

onBeforeUnmount(() => {
  isLoadHcap.value = false;
});

/***************** 注册 *****************/
let containsEmailRule = null; // 邮箱后缀,支持的列表
containsEmail({}).then((res) => {
  if (res) {
    containsEmailRule = res;
  }
});
/***************** 注册 *****************/
const email = ref(""); // 邮箱 berry@tradev-group.com
const password = ref(""); // 验证码
const registeredArr = []; // 记录,已经注册的邮箱
const errorAlertType = ref(1); // 1 不显示 2 验证码错误
const registerClick = () => {
  if (!email.value) return showToast(t("inviteFriends.qsryx"));
  if (!password.value) return showToast(t("inviteFriends.qsryzm"));
  if (!isEmail(email.value)) return showToast(t("inviteFriends.yxgsbzq"));
  if (
    !password.value ||
    `${password.value.length}` != 6 ||
    !/^\d{6}$/.test(password.value)
  ) {
    errorAlertType.value = 2;
    return showToast(t("inviteFriends.yzmcw"));
  }

  // 判断是否支持，不支持则提示  请输入正确的邮箱
  const list = email.value.split("@");
  const suffix = `@${list[1]}`;
  if (containsEmailRule && !containsEmailRule.includes(suffix)) {
    return showToast(t("inviteFriends.qsrzqdyxgs"));
  }
  // 账号(邮箱)是否已注册
  if (registeredArr.length > 0 && registeredArr.includes(email.value)) {
    return showToast(t("inviteFriends.zhyzc"));
  }

  // 验证邮箱验证码
  let emailKey = "";
  preValidation({
    type: 1,
    email: email.value,
    code: password.value,
  }).then((res) => {
    /****** start zhjdebugger start ******/
    // res = { key: "1111" };
    /****** end zhjdebugger end ******/

    if (res) {
      // 隐藏验证码错误提示
      if (errorAlertType.value != 1) errorAlertType.value = 1;
      //
      emailKey = res.key || "";
      navigateI18nTo({
        path: "/invite-friends/share-register",
        query: {
          email: email.value,
          password: "",
          inviteCode: route.query.code,
          emailKey,
        },
      });
    } else {
      errorAlertType.value = 2;
    }
  });
};

const passwordBlur = (val) => {
  console.log("passwordBlur:", password.value);
  if (!password.value || password.value == "") {
    errorAlertType.value = 1;
  }
};
/****************  三方授权  ****************/
// 是否使用,三方授权登录过
const openIDApi = async (val) => {
  try {
    // 1. 使用 loading 遮罩
    showLoadingToast({
      message: `${t("common.requestIng")}...`,
      forbidClick: true,
      duration: 15000,
      zIndex: 999999999,
    });
    const result = await openID({
      openID: tripartiteState.openID,
    });
    // console.log("以往是否使用 openID 授权登录查询:", result);

    if (result) {
      // 已经注册过，提示
      if (result.openIdCheck) {
        registeredArr.push(val.email);
        tripartiteState.$patch({
          isUnregistered: true,
        });

        if (tripartiteState.$state.type == 3) {
          showToast(`Google ${t("inviteFriends.zhyzc")}`);
        } else if (tripartiteState.$state.type == 4) {
          showToast(`FaceBook ${t("inviteFriends.zhyzc")}`);
        }
      }
      // 未注册过
      else {
        tripartiteState.$patch({
          isUnregistered: false,
        });
        if (val && val.email) {
          // 1. 赋值 + 提示
          email.value = val.email;
          showToast(t("mvp.other.text12"));
          // 1.1
          hcaptchaToken.value = "";
          hcaptchaRef.value.reset && hcaptchaRef.value.reset(); // 没有起作用,就改了,跳转过去页面的返回按钮事件

          // 2. 授权成功,且没有注册的用户,直接跳转到注册页面
          setTimeout(() => {
            navigateI18nTo({
              path: "/invite-friends/share-register",
              query: {
                email: email.value,
                password: "",
                inviteCode: route.query.code,
                emailKey: "",
                isThreeParties: true,
                hrefUrl: window.location.href,
              },
            });
          }, 1);
        }
      }
    }
  } catch (error) {
    console.log(error);
  }
};

const OnGoogleAuthSuccess = (idToken) => {
  const info = jwt.decodeJwt(idToken.credential); //解析token
  tripartiteState.$patch({
    type: 3,
    idToken: idToken.credential,
    openID: info?.sub ?? "",
    email: info.email || "",
  });
  // console.log(idToken, "谷歌登录成功pageData", info);
  openIDApi(info);
};

//  facebook 授权以后是不返回邮箱的
const OnFacebookAuthSuccess = (response) => {
  if (response == false) {
    showToast(`FaceBook ${t("inviteFriends.sqsb")}`);
  } else {
    tripartiteState.$patch({
      type: 4,
      idToken: response.authResponse?.accessToken,
      openID: response.authResponse?.userID,
      email: response.email || "",
    });
    // console.log("facebook 登录成功pageData", response);
    openIDApi(response);
  }
};

// 期数格式化
const formatWithTimeZone = (date, timeZone, locale) => {
  const yearFormatter = new Intl.DateTimeFormat("en-US", {
    year: "numeric",
    timeZone: timeZone,
  });
  const monthFormatter = new Intl.DateTimeFormat("en-US", {
    month: "numeric",
    timeZone: timeZone,
  });
  const dayFormatter = new Intl.DateTimeFormat("en-US", {
    day: "numeric",
    timeZone: timeZone,
  });
  const year = yearFormatter.format(new Date(Number(date)));
  const month = monthFormatter.format(new Date(Number(date)));
  const day = dayFormatter.format(new Date(Number(date)));

  return `${year}.${month}.${day}`;
};

/****************  邮箱验证码  ****************/
const time = ref(0); // 倒计时
const timer = ref(); // 定时器
const hcaptchaRef = ref(); // 验证码实例
const hcaptchaToken = ref(""); //  googleToken

const handleSend = debounce(
  () => {
    // 先判断是否符合邮箱格式
    if (!email.value) return showToast(t("inviteFriends.qsryx"));
    if (!isEmail(email.value)) return showToast(t("inviteFriends.yxgsbzq"));
    //
    hcaptchaRef.value.execute();
  },
  2000,
  false
);

// 获取邮箱验证码
const hcaptchaValidateGetEmailCodeApi = async (call) => {
  hcaptchaValidateGetEmailCode({
    email: email.value,
    type: 7,
    googleToken: hcaptchaToken.value,
  }).then((res) => {
    if (res) {
      call && call();
      nextTick(() => {
        hcaptchaToken.value = "";
        hcaptchaRef.value.reset && hcaptchaRef.value.reset(); // 没有起作用,就改了,跳转过去页面的返回按钮事件
      });
    }
  });
};

// 获取验证码
const handleSendmobileCode = () => {
  // 1. 获取验证码
  hcaptchaValidateGetEmailCodeApi(() => {
    // 2. 如果成功,执行定时器
    if (timer.value) return;
    time.value = 60;
    timer.value = setInterval(() => {
      time.value--;

      if (time.value <= 0) {
        clearInterval(timer.value);
        timer.value = undefined;
      }
    }, 1000);
  });
};

/**
 * @description: 人机交互组件验证成功
 * @param {*} token 获取验证码使用的
 * @param {*} eKey
 */
const handleVerify = (token, eKey) => {
  // console.log("token--", token);
  // console.log("eKey--", eKey);
  // 1. 保存 token,用于获取 验证码
  hcaptchaToken.value = token;
  // 2. 获取验证码
  handleSendmobileCode();
};
</script>
<style lang="scss" scoped>
.inviteFriends {
  position: relative;
  background-color: #e1edfa;
  // height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  overflow-y: scroll;
  overflow-x: hidden;
  padding-bottom: calc(var(--safe-area-inset-bottom) + 110 * 2px);

  &-bg {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, #8dc4ff 0%, #c6fafc 75%, #c6fafc 100%);
    width: 100vw;
    height: calc(88 * 2px + 375 * 2px);
  }
  &-contentbg {
    position: relative;
    z-index: 19;
    top: -5 * 2px;
    width: 100vw;
    background-color: #e1edfa;
  }
}

.header {
  position: relative;
  width: 100vw;
  height: 336 * 2px;
  // overflow: hidden;
  margin-bottom: 10 * 2px;

  &-bgimg {
    position: absolute;
    top: -99 * 2px;
    left: 0;
    width: 100vw;
    object-fit: cover;
  }

  &-user {
    justify-content: space-between;
    margin: 0 * 2px 15 * 2px 10 * 2px 15 * 2px;
    padding: 8 * 2px 10 * 2px;
    border-radius: 12 * 2px;
    overflow: hidden;
    background: linear-gradient(90deg, #e8fcff 0%, #fff 50.37%, #e8fcff 100%);
    border: 0.7px solid #fff;
    backdrop-filter: blur(80px);

    &-left {
    }
    &-img {
      width: 40 * 2px;
      height: 40 * 2px;
      border-radius: 100px;
      overflow: hidden;
      margin-right: 4 * 2px;
    }

    &-level {
      width: 32 * 2px;
      height: 32 * 2px;
      margin-right: 4 * 2px;
    }
    &-name {
      white-space: nowrap;
      color: #002853;
      font-size: 13 * 2px;
      font-weight: 590;
      &-desc {
        white-space: nowrap;
        color: #7f8eb4;
        font-size: 11 * 2px;
        font-weight: 400;
        padding: 3.5 * 2px 8 * 2px;
        background: linear-gradient(
          90deg,
          rgba(184, 227, 250, 0) 0%,
          #b8e3fa 49.73%,
          rgba(184, 227, 250, 0) 100%
        );
        &-value {
          color: #007bff;
          font-size: 11 * 2px;
          font-weight: 700;
        }
      }
    }
    &-reward {
      flex-direction: column;
      justify-content: center;
      background-color: #fff;
      // border: 0.7px solid #fff;
      padding: 5 * 2px 9 * 2px;
      border-radius: 4 * 2px;
      &-top {
        color: #7c9dc1;
        text-align: center;
        font-size: 12 * 2px;
        font-weight: 400;
      }
      &-line {
        width: 95%;
        border-bottom: 1px dashed #cbd9e8;
        margin: 3 * 2px 0;
        margin-left: 2.5%;
      }
      &-bottom {
        color: #007bff;
        text-align: center;
        font-size: 13 * 2px;
        font-weight: 700;
      }
    }
  }
  &-bottomimg {
    position: absolute;
    z-index: 9;
    bottom: -12 * 2px;
    left: 0;
    width: 100vw;
    height: 44 * 2px;
    object-fit: cover;
  }
  &-winners {
    position: absolute;
    bottom: 35 * 2px;
    width: 100vw;
    &-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: calc(100% - 10 * 4px);
      height: 179 * 2px;
      margin: 0 10 * 2px;
    }
    &-title {
      position: relative;
      top: 24 * 2px;
      z-index: 1;
      justify-content: center;
      &-icon {
        margin: 0 * 2px 12 * 2px;
        margin-top: 4 * 2px;
        width: 10 * 2px;
        height: 10 * 2px;
      }
      &-text {
        font-size: 14 * 2px;
        color: #002853;
        font-weight: 590;
      }
    }
    &-list {
      position: relative;
      z-index: 1;
      top: 35 * 2px;
      width: 100%;
      justify-content: space-evenly;
      padding: 0 10 * 2px;
      &-item {
        background: linear-gradient(180deg, #e5fbff 0%, #e5f2ff 131.3%);
        flex-direction: column;
        justify-content: center;
        min-width: 110 * 2px;
        padding-bottom: 20 * 2px;
        &-tx {
          position: relative;
          justify-content: center;
          width: 50 * 2px;
          height: 50 * 2px;
          &-bg {
            position: absolute;
            z-index: 6;
            top: 0;
            left: 0;
            width: 50 * 2px;
            height: 50 * 2px;
          }
          &-avatar {
            position: relative;
            z-index: 5;
            width: 34 * 2px;
            height: 34 * 2px;
            border-radius: 100px;
            overflow: hidden;
          }
        }
        &-nickname {
          font-size: 12 * 2px;
          color: #002853;
          font-weight: 590;
          margin: 2 * 2px 10 * 2px;
        }
        &-value {
          width: 100%;
          text-align: center;
          padding: 4 * 2px 6 * 2px;
          background: linear-gradient(
            90deg,
            rgba(41, 184, 255, 0) 0%,
            rgba(41, 184, 255, 0.4) 50.4%,
            rgba(41, 184, 255, 0) 100%
          );
          font-size: 15 * 2px;
          color: #007bff;
          font-weight: 590;
        }
      }
    }
    &-left {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 19;
      width: 40 * 2px;
      height: 43 * 2px;
    }
    &-right {
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 19;
      width: 40 * 2px;
      height: 43 * 2px;
    }
  }
}

.register {
  position: relative;
  z-index: 9;
  border-radius: 12 * 2px;
  overflow: hidden;
  padding: 15 * 2px 10 * 2px;
  margin: 0 15 * 2px;
  background-color: #fff;
  margin-bottom: 10 * 2px;
  &-yzm {
    padding: 6 * 2px 10 * 2px;
  }
  &-bg {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, #e7fbff 0%, #fff 100%);
    width: 100%;
    height: 88 * 2px;
  }

  &-title {
    position: relative;
    z-index: 9;
    justify-content: center;
    margin-bottom: 15 * 2px;
    &-leftimg {
      margin-top: 3 * 2px;
      height: 9 * 2px;
      margin-right: 10 * 2px;
    }
    &-rightimg {
      margin-top: 3 * 2px;
      height: 9 * 2px;
      margin-left: 10 * 2px;
    }
    &-text {
      color: #002853;
      font-size: 14 * 2px;
      font-weight: 590;
    }
  }
  &-third {
    margin-bottom: 10 * 2px;
    &-item {
      border-radius: 4 * 2px;
      padding: 6 * 2px 20 * 2px;
      overflow: hidden;
      justify-content: center;
      width: calc(50% - 6 * 2px);
      margin-right: 12 * 2px;
      &-logo {
        width: 30 * 2px;
        height: 30 * 2px;
        margin-right: 8 * 2px;
      }
      &-text {
        font-size: 15 * 2px;
        font-weight: 510;
        color: #fff;
      }
    }
  }

  &-or {
    justify-content: center;
    margin-bottom: 10 * 2px;
    &-left {
      flex: 1;
      height: 1px;
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        #f0f3fa 100%
      );
    }
    &-center {
      margin: 0 15 * 2px;
      color: #141924;
      text-align: center;
      font-size: 14 * 2px;
      font-weight: 400;
    }
    &-right {
      flex: 1;
      height: 1px;
      background: linear-gradient(
        90deg,
        #f0f3fa 0%,
        rgba(255, 255, 255, 0) 100%
      );
    }
  }

  &-input {
    border-radius: 4 * 2px;
    background: #f0f5fa;
    margin-bottom: 12 * 2px;
    color: #c2c5cc;
    font-size: 15 * 2px;
    font-weight: 400;
  }
  &-btn {
    background: linear-gradient(90deg, #007bff 0.07%, #00b2ff 99.93%);
    box-shadow: 0px -8px 8px 0px rgba(0, 0, 0, 0.25) inset;
    width: 100%;
    border-radius: 100px;
    padding: 12 * 2px 0;
    text-align: center;
    color: #fff;
    font-size: 17 * 2px;
    font-weight: 590;
  }

  &-send {
    padding: 8px 12px;
    border-radius: 4 * 2px;
    background: #007bff;
    color: #fff;
    font-weight: 590;
    font-size: 15 * 2px;
    margin-left: 10 * 2px;
    &-nums {
      padding: 8px 12px;
      border-radius: 4 * 2px;
      background: #b0d1f4;
      color: #fff;
      font-weight: 590;
      font-size: 15 * 2px;
      margin-left: 10 * 2px;
    }
  }
}

.errorAlert {
  // margin-top: 4 * 2px;
  margin-bottom: 10 * 2px;
  &-icon {
    width: 18 * 2px;
    height: 18 * 2px;
    margin-right: 2 * 2px;
  }
  &-text {
    color: #ff4040;
    font-size: 11 * 2px;
  }
}

.wqcj {
  position: relative;
  z-index: 9;
  border-radius: 12 * 2px;
  overflow: hidden;
  margin: 0 15 * 2px;
  background-color: #fff;
  margin-bottom: 10 * 2px;

  &-bg {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, #e7fbff 0%, #fff 100%);
    width: 100%;
    height: 155 * 2px;
  }

  &-title {
    position: relative;
    z-index: 9;
    justify-content: center;
    margin: 15 * 2px 0;
    &-leftimg {
      margin-top: 3 * 2px;
      height: 9 * 2px;
      margin-right: 10 * 2px;
    }
    &-rightimg {
      margin-top: 3 * 2px;
      height: 9 * 2px;
      margin-left: 10 * 2px;
    }
    &-text {
      color: #002853;
      font-size: 17 * 2px;
      font-weight: 590;
    }
  }

  &-item {
    position: relative;
    width: 100%;
    // padding-bottom: 10 * 2px;
    &-left {
      position: relative;
      margin: 6 * 2px 7 * 2px 0 7 * 2px;
      &-point {
        width: 6 * 2px;
        height: 6 * 2px;
        border-radius: 100px;
        background-color: #add5ff;
        border: 1px solid #007bff;
      }
      &-xx {
        width: 1px;
        margin-left: 2.5 * 2px;
        height: 192 * 2px;
        border-left: 1px dashed rgba(0, 0, 0, 0.1);
      }
    }

    &-right {
      position: relative;
      top: 5px;
      width: calc(100% - 20 * 2px - 10 * 2px);
      margin-right: 10 * 2px;
      margin-bottom: 10 * 2px;
    }
    &-top {
      margin-bottom: 10 * 2px;
      &-text {
        color: #002853;
        font-size: 13 * 2px;
        font-weight: 590;
        margin-right: 7 * 2px;
      }
      &-icon {
        height: 14 * 2px;
      }
    }

    &-bottom {
      border-radius: 12 * 2px;
      background-color: #e6f3ff;
      min-height: 164 * 2px;
      &-header {
        border-radius: 12 * 2px;
        background: linear-gradient(
          90deg,
          #ebf6ff 1%,
          #007bff 20%,
          #007bff 80%,
          #ebf6ff 100%
        );
        background-size: 100% 50%;
        background-repeat: no-repeat;
        justify-content: center;
        margin-bottom: 10 * 2px;
        &-center {
          padding: 5 * 2px 8 * 2px;
          background-color: #007bff;
          border-radius: 0 0 12 * 2px 12 * 2px;
          &-text {
            color: #fff;
            font-size: 11 * 2px;
            font-weight: 400;
          }
          &-value {
            margin-left: 8 * 2px;
            color: #ffffd8;
            font-size: 14 * 2px;
            font-weight: 590;
          }
        }

        &-left {
          flex: 1;
          height: 22 * 2px;
          width: 100%;
          border-radius: 12 * 2px 12 * 2px 0 0;
          background-color: #e6f3ff;
        }
        &-right {
          flex: 1;
          height: 22 * 2px;
          width: 100%;
          border-radius: 12 * 2px 12 * 2px 0 0;
          background-color: #e6f3ff;
        }
      }

      &-footer {
        justify-content: space-around;
        padding-bottom: 10 * 2px;
      }
      &-item {
        flex-direction: column;
        justify-content: space-between;
        border-radius: 8 * 2px;
        border: 1px solid #fff;
        background: linear-gradient(180deg, #dbefff 0%, #ebf6ff 100%);
        // margin: 0 10 * 2px;
        // width: 50%;
        min-width: 135 * 2px;
        max-width: 135 * 2px;

        &-title {
          @include multi-line-omit(1);
          border-radius: 0px 0px 10 * 2px 10 * 2px;
          background: linear-gradient(180deg, #d5edff 0%, #aedbff 100%);
          padding: 2.5 * 2px 8 * 2px;
          color: #007bff;
          text-align: center;
          font-size: 12 * 2px;
          font-weight: 400;
          margin-bottom: 7 * 2px;
        }
        &-img {
          width: 40 * 2px;
          height: 40 * 2px;
          border-radius: 100px;
          overflow: hidden;
        }
        &-name {
          color: #002853;
          text-align: center;
          font-size: 13 * 2px;
          font-weight: 590;
          margin: 3 * 2px 0;
        }
        &-monery {
          position: relative;
          border-radius: 8 * 2px;
          background: linear-gradient(90deg, #007bff 0.07%, #00b2ff 99.93%);
          margin: 0 * 2px 9 * 2px 5 * 2px 9 * 2px;
          min-width: 110 * 2px;
          &-left {
            position: absolute;
            z-index: 9;
            top: 50%;
            transform: translateY(-50%);
            left: -4 * 2px;
            width: 8 * 2px;
            height: 8 * 2px;
            border-radius: 100px;
            background-color: #e6f3ff;
          }
          &-text {
            text-align: center;
            text-wrap: nowrap;
            white-space: nowrap;
            padding: 6 * 2px 22 * 2px;
            color: #ffffd8;
            font-size: 15 * 2px;
            font-weight: 590;
          }
          &-right {
            position: absolute;
            z-index: 9;
            top: 50%;
            transform: translateY(-50%);
            right: -4 * 2px;
            width: 8 * 2px;
            height: 8 * 2px;
            border-radius: 100px;
            background-color: #e6f3ff;
          }
        }
      }
    }
  }

  &-notData {
    justify-content: center;
    flex-direction: column;
    position: relative;
    min-height: 150 * 2px;
    &-img {
      width: 120 * 2px;
      height: 120 * 2px;
    }
    &-desc {
      margin-top: -22 * 2px;
      color: #999da7;
      font-size: 13 * 2px;
    }
  }
}
</style>
